<template>
  <h2>个人资料</h2>
  <form @submit.prevent="save" class="form">
    <label>昵称</label><input v-model="form.displayName" />
    <label>头像URL</label><input v-model="form.avatarUrl" />
    <label>手机</label><input v-model="form.phone" />
    <label>时区</label><input v-model="form.timezone" placeholder="Asia/Shanghai" />
    <label>语言</label><input v-model="form.locale" placeholder="zh-CN" />
    <label>邮件签名</label><textarea v-model="form.emailSignature" rows="4"></textarea>
    <button :disabled="loading">保存</button>
    <p class="ok" v-if="ok">{{ ok }}</p>
    <p class="err" v-if="err">{{ err }}</p>
  </form>
</template>

<script>
export default { name: 'AccountProfile'}
</script>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { accountApi } from '@/api/account'
const form = reactive({ displayName:'', avatarUrl:'', phone:'', timezone:'', locale:'', emailSignature:'' })
const loading = ref(false), ok = ref(''), err = ref('')
const load = async ()=>{ const p = await accountApi.getProfile(); Object.assign(form, p) }
const save = async ()=>{
  loading.value=true; ok.value=''; err.value=''
  try{ await accountApi.updateProfile(form); ok.value='已保存' }catch(e){ err.value=e?.response?.data?.message||'保存失败' }
  finally{ loading.value=false }
}
onMounted(load)
</script>
<style scoped>
.form{display:grid; gap:8px; max-width:560px}
input,textarea{background:#f7f8fb;border:1px solid #e5e7eb;border-radius:8px;padding:8px}
button{padding:8px 12px;border:1px solid #409eff;background:#409eff;color:#fff;border-radius:8px}
.ok{color:#16a34a}.err{color:#dc2626}
</style>
